<template>
  <div v-if="todos.length">
    <input
      type="checkbox"
      :checked="doneCount === totalCount && totalCount !== 0"
      @change="changeObjAll"
    />
    <span>已完成 {{ doneCount }}/{{ totalCount }}</span>
    <button @click="clearDoneObj">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "MyFooter",
  props: ["todos"],
  computed: {
    doneCount() {
      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
    },
    totalCount() {
      return this.todos.length;
    },
  },
  methods: {
    clearDoneObj() {
      this.$emit("clearDoneTask");
    },
    changeObjAll(e) {
      const done = e.target.checked;
      this.$emit("changeTaskDoneAll", done);
    },
  },
};
</script>

<style>
</style>